<template>
  <b-col>
    <b-row class="p-3">
      <b-col class="pl-0 col-auto">
        <h4 style="font-family:HYZhengYuan-85S">
          发布的内容
        </h4>
      </b-col>
      <b-col v-if="loading" class="col-auto">
        <b-spinner variant="primary" type="grow" small />
      </b-col>
    </b-row>
    <!-- 循环体 -->
    <!-- v-for="issue in taIssue.data" :key="issue.id" -->
    <b-row v-for="issue in taIssue.data" :key="issue.id" class="border-bottom">
      <!-- 其中的卡片 -->
      <b-col class="my-1">
        <!-- 帖子卡片第一行 昵称头像和时间 -->
        <b-row class="py-2">
          <b-col class="pr-2 col-auto" align-self="center">
            <b-img-lazy rounded="circle" class="border" width="53" height="53"
              blank-src="https://s1.imagehub.cc/images/2023/03/11/64854baae2c410c756c1e1c6aaf4dc32.png" :src="issue.user.headUrl" />
          </b-col>
          <b-col class="col-10">
            <b-row>
              <b-col class="px-0">
                <b-link class="text-nowarp text-decoration-none">{{issue.user.name}}</b-link>
              </b-col>
              <div class="w-100" />
              <b-col class="pl-0">
                <span class="text-muted">{{getTime(issue.time)}}</span>
              </b-col>
            </b-row>
          </b-col>
        </b-row>
        <!-- 帖子内容 第一个版本 -->
        <b-row>
          <b-col>
            <b-link @click="toDetail(issue.id)" class="text-decoration-none">
              <p class="content overflow-hidden">
                {{issue.content}}
              </p>
            </b-link>
          </b-col>
        </b-row>
        <!-- 图片栏位-->
        <b-row v-if="issue.imageUrl" class="text-center">
          <b-col v-for="(u,index) in getUrlList(issue.imageUrl)" :key="u" class="col-auto pr-2" :class="{'pl-0':index!=0}">
            <b-img class="rounded border" width="80" height="80" :src="u" />
          </b-col>
        </b-row>
        <!-- 功能交互 -->
        <b-row class="justify-content-start py-1">
          <b-col class="col-auto pr-0">
            <span class="iconfont icon-browse">{{issue.view}}</span>
          </b-col>
          <b-col class="col-auto pr-0">
            <span class="iconfont icon-good">{{issue.likeNum}}</span>
          </b-col>
          <b-col class="col-auto pr-0">
            <span class="iconfont icon-comment">{{issue.commentNum}}</span>
          </b-col>
        </b-row>
      </b-col>
    </b-row>
    <!-- 翻页 -->
    <b-row v-if="taIssue.data!=null && taIssue.total>5">
      <b-col>
        <b-pagination-nav prev-text="上一页" next-text="下一页" use-router :base-url="pagination.baseURL" :value="taIssue.page" align="center" size="md"
          :number-of-pages="pagination.total" />
      </b-col>
    </b-row>
    <b-row v-if="taIssue.data!=null && taIssue.total <=5 && taIssue.total >0">
      <b-col class="text-center pb-2" style="font-family:HYZhengYuan-55S">
        <h5>到底咯</h5>
      </b-col>
    </b-row>
    <b-row v-if="pagination.total!=null&&pagination.total == 0">
      <b-col class="text-center pb-2" style="font-family:HYZhengYuan-55S">
        <h5>暂无内容</h5>
      </b-col>
    </b-row>
  </b-col>
</template>
<script>
import tool from '@/utils/tool'
export default {
  props: {
    id: String,
  },
  data() {
    return {
      //页面内容
      taIssue: {
        data: null,
      },
      //加载圈
      loading: true,
      //分页组件
      pagination: {
        page: null,
        total: null,
        baseURL: "/PersonPage/IssueCard?id=" + this.id + "&page=",
      }
    }
  },
  mounted() {
    this.updatePage(1, this.id);
  },
  beforeRouteUpdate(to) {
    /**
     * 在当前路由改变，但是该组件被复用时调用
     举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
     由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
     可以访问组件实例 `this`
    console.log("to", to);
    console.log("from", from);
    console.log("next", next);
     */
    this.loading = true;
    this.updatePage(to.query.page, to.query.id);
  },
  methods: {
    //页面更新
    updatePage(page, id) {
      this.$httpIssue.getUserDynamic(page, id).then((res) => {
        console.log(res);
        this.taIssue = res;
        this.pagination.page = res.page;
        this.pagination.total = Math.ceil(res.total / 5);
        this.loading = false;
      })
    },
    //时间转换
    getTime(time) {
      return tool.transTime(time);
    },
    //分离图片
    getUrlList(url) {
      return url.split(",");
    },
    //跳转到详情
    toDetail(id) {
      this.$pageRedirect.toADDetails(id, "dynamic");
    },
  }
}
</script>
<style scoped>
.content {
  font-size: 16px;
  color: black;
  display: -webkit-box;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2; /* 要显示的行数 */
  -webkit-box-orient: vertical;
}
.content:hover {
  color: rgb(77, 76, 76);
}
.li:focus {
  outline: none;
  box-shadow: none;
}
</style>
